<template>
    <div class="box">




        <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">

            <el-form-item style="font-weight:800" label="年级:" prop="grade">
                <el-select v-model="ruleForm.grade" placeholder="年级">
                    <el-option label="一年级" value=1></el-option>
                    <el-option label="二年级" value=2></el-option>
                    <el-option label="三年级" value=3></el-option>
                    <el-option label="四年级" value=4></el-option>
                    <el-option label="五年级" value=5></el-option>
                    <el-option label="六年级" value=6></el-option>
                    <el-option label="初一" value=7></el-option>
                    <el-option label="初二" value=8></el-option>
                    <el-option label="初三" value=9></el-option>
                    <el-option label="高一" value=10></el-option>
                    <el-option label="高二" value=11></el-option>
                    <el-option label="高三" value=12></el-option>
                </el-select>
            </el-form-item>
            <el-form-item style="font-weight:800" label="学科:" prop="discipline">
                <el-select v-model="ruleForm.discipline" placeholder="学科">
                    <el-option v-for="item, index in updata" :label="item.name + '(' + item.levelName + ')'"
                        :value="index"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="题干:">
                <el-input maxlength="0" value="maxlength" @focus="test" v-model="bbb"></el-input>
            </el-form-item>
            <el-dialog title="提示" :visible.sync="dialog" width="30%">
                <el-input v-model="bbb"></el-input>
            </el-dialog>

            <el-form-item label="选项:" prop="name">
                <template v-for="item, index in ruleForm.list">
                    <span style="margin-right:10px;font-weight: bold;">{{ item.name }}</span>
                    <el-input style="width:50px;margin-right:10px;" v-model="item.name"></el-input>
                    <el-input maxlength="0" value="maxlength" @focus="text(item)"
                        style="width:800px;margin-top: 30px;margin-right:10px" v-model="item.inp"></el-input>
                    <el-button type="danger" icon="el-icon-delete" @click="remove(index)"></el-button>
                    <br>
                </template>
            </el-form-item>


            <el-form-item label="解析:">
                <el-input maxlength="0" value="maxlength" @focus="test1" v-model="ddd"></el-input>
            </el-form-item>
            <el-dialog title="提示" :visible.sync="dialog1" width="30%">
                <el-input v-model="ddd"></el-input>
            </el-dialog>
            <!-- 分数 -->
            <el-form-item label="分数:">
                 <el-input-number v-model="num" :step="2"></el-input-number>
            </el-form-item>
           
            <!-- 难度 -->
            <el-form-item label="难度:">
                <el-rate v-model="value1" style="margin-top:10px;"></el-rate>
            </el-form-item>


            <!-- 正确答案内容 -->
            <el-form-item style="margin-left:25px;"  label="正确答案:" prop="name">
                <el-checkbox v-for="item in newArr" @click.native="xuanzhong(item)" v-model="ruleForm.aaa" :label="item.val">{{ item.name }}</el-checkbox>
            </el-form-item>
        </el-form>
        <!-- 点击显示input框 -->
        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
            <!--获取当前的相对应的input框  -->
            <el-input autofocus="autofocus" v-model="input.inp"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
        <el-button style="margin-left:50px;" type="primary" @click="tijiao">提交</el-button>
        <el-button @click="chongzhi">重置</el-button>
        <el-button type="success" @click="add">添加选项</el-button>
        <el-button @click="yulan">预览</el-button>

        <el-dialog title="提示" :visible.sync="Visible">
            <div v-for="item, index in ruleForm.list">  
                <span>{{ item.name }}</span>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="Visible = false">取 消</el-button>
                <el-button type="primary" @click="Visible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            input: {},
            // ---------------------------
            dialogVisible: false,
            Visible: false,
            dialog: false,
            dialog1: false,
            value1: null,
            num: 1,
            list1:[],
            arr: [],
            bbb: '',
            ddd: "",
            ruleForm: {
                aaa: '',
                name1: '',
                list: [
                    {
                        name: "A",
                        val: 1,
                        inp: '',
                    },
                    {
                        name: "B",
                        val: 2,
                        inp: '',
                    },
                    {
                        name: "C",
                        val: 3,
                        inp: '',
                    },
                    {
                        name: "D",
                        val: 4,
                        inp: '',
                    }
                ],

            },
            radios:''

        }
    },
    created() {
        this.list = this.ruleForm.list;
    },
    mounted() {
        // this.ruleForm.list.forEach(item => {
        //     // console.log(item);
        // })
        this.axios({
            method: "post",
            url: "/api/admin/education/subject/list",
        }).then(res => {
            // this.tableData = res.data.response
            this.arr = res.data.response
        })
    },
    computed: {
        newArr() {
            return this.ruleForm.list
        },
        //选择年级显示对应的学科
        updata() {
            return this.arr.filter(item => item.levelName == this.ruleForm.grade ? item : ""
            )
        }
    },
    methods: {
        
        xuanzhong(item){
            // item.forEach
            this.radios  = item.name
            console.log(this.radios)
        },
        tijiao() {
            
            this.ruleForm.list.forEach(item=>{
                this.list1.push({
                    prefix:item.name,
                    content:item.inp
                })
                
            })
            console.log(this.arr)
            console.log(this.list1)
            let TJSJ = {
                "id": null, //题目id
                "questionType": 1, //题型
                "subjectId": 1,  //学科
                "title":this.bbb,   //题干
                "gradeLevel": 1,  //年级
                "items":this.list1,  //选项
                "analyze": this.ddd,   //解析
                "correctArray": null, //标答
                "correct":this.radios, //正确答案
                "score": this.num,  //题目分数
                "difficult": this.value1, //难度
                "itemOrder": null
            }
            this.axios({
                url: "/api/admin/question/edit",
                method: "post",
                data:TJSJ,
            }).then(res => {
                console.log(res)
                // this.$router.push("/exam/question/list")
            })
        },
        //预览按钮
        yulan() {
            this.Visible = true
        },
        test(val) {
            this.dialog = true;
            // console.log(val)
        },
        test1(val) {
            this.dialog1 = true;
            // console.log(val)
        },
        //重置按钮
        chongzhi() {
            this.ruleForm.list.splice(4)
        },

        // ----------------------
        queding() {

            this.dialogVisible = false
        },
        text(val) {
            console.log(val)
            this.dialogVisible = true;
            // ------------
            this.input = val;

            console.log(this.input);
        },
        add() {
            let str = this.ruleForm.list[this.ruleForm.list.length - 1].name
            let num = this.ruleForm.list[this.ruleForm.list.length - 1].val
            num++
            let str1 = str.charCodeAt();//把值转为相对应的ASCLL码（值转数字）
            str1++; //将ASCLL码++ 得到下一个的ASCLL
            let str2 = String.fromCharCode(str1) //将下一个的ASCLL转化为值（数字转值）
            // console.log(str2);
            let obj = {
                name: str2,
                val: num,
                inp: ''
            }
            this.ruleForm.list.push(obj)
        },
        remove(index) {
            this.ruleForm.list.splice(index, 1)
        }
    },

}
</script>
<style lang="scss" scoped>
.el-dialog__body {
    display: flex;
}
</style>